<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="js/jquery-1.12.4.js"></script>


    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/elementui.css">
    <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="js/elementui.js"></script>


</head>
<script src="js/ajaxGo.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/xia.css"/>
<script src="js/multiples.js"></script>

<body>
<style>
    .is-selected {
        color: #1989FA;
    }


    @import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

    .el-header {
        background-image: linear-gradient(-225deg, #A8BFFF 0%, #884D80 100%);
        color: #333;
        line-height: 60px;
        height: 58px;
    }

    .el-aside {
        color: #333;
    }

    .ddv::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px; /*宽度竖滚动条的尺寸*/
        height: 10px; /*高度横滚动条的尺寸*/
    }

    .ddv::-webkit-scrollbar-thumb {
        /*滚动条里面的条*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #909090;
    }

    .ddv::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 10px;
        background: #ffffff;
    }

    .ddv:hover {
        -webkit-box-shadow: #A9A9A9 0px 10px 10px;

        -moz-box-shadow: #A9A9A9 0px 10px 10px;

        box-shadow: #A9A9A9 0px 10px 10px;
    }

    .show_boxs {
        -webkit-box-shadow: #A9A9A9 0px 3px 3px;

        -moz-box-shadow: #A9A9A9 0px 3px 3px;

        box-shadow: #A9A9A9 0px 3px 3px;
    }

    body {
        overflow-y: hidden;
        font-size: 14px;
        line-height: 24px;
        font-family: LiSu;
    }

    #div {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    #div:hover {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .zeng {
        color: #fff;
        font-size: 25px;
        margin-top: 15px;
        margin-left: 20px;
        border: none;
        width: 30px;
        height: 30px;
        background-color: #A6B6F5;
        border-radius: 3px;
    }

    .zeng:hover {
        background-color: #D5D4D5;

        color: #000;
    }

    .col {
        color: white;
        background-color: #A6B6F5;
        margin-left: 5px;
        border: none;
        width: 65px;
        height: 30px;
        border-radius: 3px;
    }

    .col:hover {
        color: #000;
        background-color: #D5D4D5;
    }

    #pp {
        margin-top: -30px;
        margin-left: 56px;
    }

    .msgbox {
        background-color: #000;
        opacity: 0.1;
        top: 0;
        left: 0;
        z-index: 999;
        display: inline-block;
    }

    .herd_But {
        color: #CB0909;
        font-size: 30px;
        background-color: white;
        width: 24px;
        height: 24px;
        border-radius: 5px;
        margin-left: 370px;
        border: none;
    }

    .herd_But:hover {
        color: #8B0000;
    }

    .Up_but {
        color: #fff;
        background-color: #A6B6F5;
        border-radius: 3px;
    }

    .Up_but:hover {
        color: #000;
        background-color: #D5D4D5;
    }


    /*动画*/
    .loader {
        height: 100%;
        position: relative;
        margin: auto;
        width: 400px;
    }

    .loader_overlay {
        width: 150px;
        height: 150px;
        background: transparent;
        box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
        border-radius: 100%;
        z-index: -1;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .loader_cogs {
        z-index: -2;
        width: 100px;
        height: 100px;
        top: -120px !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .loader_cogs__top {
        position: relative;
        width: 100px;
        height: 100px;
        -webkit-transform-origin: 50px 50px;
        transform-origin: 50px 50px;
        -webkit-animation: rotate 10s infinite linear;
        animation: rotate 10s infinite linear;
    }

    .loader_cogs__top div:nth-of-type(1) {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .loader_cogs__top div:nth-of-type(2) {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .loader_cogs__top div:nth-of-type(3) {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .loader_cogs__top div.top_part {
        width: 100px;
        border-radius: 10px;
        position: absolute;
        height: 100px;
        background: #f98db9;
    }

    .loader_cogs__top div.top_hole {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: white;
        position: absolute;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .loader_cogs__left {
        position: relative;
        width: 80px;
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
        top: 28px;
        -webkit-transform-origin: 40px 40px;
        transform-origin: 40px 40px;
        -webkit-animation: rotate_left 10s .1s infinite reverse linear;
        animation: rotate_left 10s .1s infinite reverse linear;
        left: -24px;
        height: 80px;
    }

    .loader_cogs__left div:nth-of-type(1) {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .loader_cogs__left div:nth-of-type(2) {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .loader_cogs__left div:nth-of-type(3) {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .loader_cogs__left div.left_part {
        width: 80px;
        border-radius: 6px;
        position: absolute;
        height: 80px;
        background: #97ddff;
    }

    .loader_cogs__left div.left_hole {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background: white;
        position: absolute;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .loader_cogs__bottom {
        position: relative;
        width: 60px;
        top: -65px;
        -webkit-transform-origin: 30px 30px;
        transform-origin: 30px 30px;
        -webkit-animation: rotate_left 10.2s .4s infinite linear;
        animation: rotate_left 10.2s .4s infinite linear;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
        left: 79px;
        height: 60px;
    }

    .loader_cogs__bottom div:nth-of-type(1) {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .loader_cogs__bottom div:nth-of-type(2) {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .loader_cogs__bottom div:nth-of-type(3) {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .loader_cogs__bottom div.bottom_part {
        width: 60px;
        border-radius: 5px;
        position: absolute;
        height: 60px;
        background: #ffcd66;
    }

    .loader_cogs__bottom div.bottom_hole {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        background: white;
        position: absolute;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes rotate_left {
        from {
            -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
        }
        to {
            -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
        }
    }

    @keyframes rotate_left {
        from {
            -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
        }
        to {
            -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
        }
    }

    @-webkit-keyframes rotate_right {
        from {
            -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
        }
        to {
            -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
        }
    }

    @keyframes rotate_right {
        from {
            -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
        }
        to {
            -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
        }
    }


</style>

<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee;">
        <el-aside width="200px" style="height: 900px">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航</template>
                    <el-menu-item-group>

                        <el-menu-item index="1-1">显示排课表</el-menu-item>
                        <el-menu-item index="1-2">添加课程安排</el-menu-item>
                        <el-menu-item index="1-3">学生考勤</el-menu-item>
                    </el-menu-item-group>


                </el-submenu>


            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item><a onclick="gly()" id="gly">管理员</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>


                <span id="name"></span>


            </el-header>

            <el-main style="overflow:visible">
                <div id="day">
                    <el-calendar style="background-color: #E6E6FA">

                        <template slot="dateCell" slot-scope="{date, data}">
                            <p :class="data.isSelected ? 'is-selected' : ''" id="a" onclick="aa(this)">
                                {{ data.day.split('-').slice(1).join('-') }}
                                {{ data.isSelected ? '✔️' : ''}}

                            </p>


                        </template>
                    </el-calendar>

                </div>
            </el-main>
        </el-container>
    </el-container>
</div>


<div id="div" class="ddv"
     style="width: 570px; height: 615px ; background-color: white; border: 1px solid #B3C0D1;  position: absolute;    top: 0;     bottom: 0;  left: 0;  right: 0; margin: auto; display: none;">
    <div style="position: fixed;background-color:#EFE8F3;height: 60px;width: 562px;z-index:1000;">
        <input type="button" class="zeng" id="zen" value="+" onclick="inse()">
        <p id="pp">
            <input type="button" class="col" value="关闭" onclick="gb()">
            <input type="button" id="bao" class="col" value="保存" onclick="save()">
        <div style="margin-top: -40px; margin-left: 430px"><span style="margin-left: -200px;">当前日期：<span id="dan"
                                                                                                         style="color: #3a8ee6"></span></span>
            今天已排：<span id="jks" style="color: #3a8ee6"></span>节课时
        </div>
        </p>
    </div>
    <div id="div2" style="width: 530px;height: 100%;margin-top: 70px;z-index: 0;">

    </div>

</div>


<div class='loader' style="z-index: 1;display: none" id="dh">
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_hole'></div>
        </div>
        <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'></div>
        </div>
        <!--        <p>加载中...</p>-->
    </div>
</div>


<script type="text/javascript">

    let y1;
    let m1;
    let admin;
    var strs;
    //加载页面时自动获取时间表数据和班级表
    $(function () {
        $("#dh").css("display", "block");
        debugger
        var v = location.search;
        var pos = v.indexOf('?');
        var uName = v.substr(pos);
        strs = uName.split("?")[1].split("&")[0]; //字符分割
        admin = uName.split("?")[1].split("&")[1];
        document.getElementById("name").innerHTML = strs;
        //发送请求获取表格数据
        var datas = myAjax({}, "./CheckHourServlet", timess);
        var datas = myAjax({}, "./ShowClassServlet", clss);

        debugger

        var el = document.getElementsByClassName(("el-calendar__title"));
        var x = el.item(0).innerHTML.trim();
        y1 = x.split("年")[0].trim();
        m1 = x.split("年")[1].trim().substr(0, 1).trim();
        if (x.split("年")[1].trim().substr(0, 1).trim() < 10) {
            m1 = "0" + m1
        }
        MyAjax("./SelectMonth", {name: document.getElementById("name").innerText.trim(), m: m1, y: y1}, tc)


    })


    function MyAjax(url1, data1, fangfa) {
        $("#dh").css("display", "block");
        debugger
        $.ajax({
            url: url1,
            data: data1,
            dataType: "json",
            type: "post",
            async: "false",
            success: function (data) {
            },
            complete: function (data) {
                x = data.responseText;
                x1 = JSON.parse(x)
                if (data.status == 200 && data.readyState == 4) {

                    fangfa(x1)

                    $("#dh").css("display", "none");
                }
            }
        })
    }


    //获取时间并保存
    var timeres;
    var timess = function (data) {

        timeres = data;
    }
    //获取班级并保存
    var cl;
    var clss = function (data) {

        cl = data;
        var a = 1
    }


    var Main = {
        data() {
            return {
                value: new Date(),


            }
        },
        methods: {}
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')


    //管理员页面
    function gly() {
        debugger
        if (admin > 0) {
            location.href = "admin.html?'" + strs + "'";
        }
    }


    let dates;

    //获取当前点击的日期
    function aa(obj) {
        $("#div2").empty();
        let xxxxx = obj.innerHTML;

        x1 = $("#day").children("div").get(0).innerText.split("年");
        dates = x1[0].trim() + "-" + xxxxx.trim();
        $("#div").css("display", "block");
        //显示当前日期的排课记录
        var datas = myAjax({
            "name": document.getElementById("name").innerText.trim(),
            "sj": dates
        }, "./ShowUserServlet", hui);
    }

    //显示当日的排课情况
    var hui = function (data) {
        var coo = 0;
        var jks = 0;
        for (var v = 0; v < data.length; v++) {
            $("#div2").append('<div class="show_boxs" style="border: 1px solid #B0C4DE; width: 530px;height: 170px;margin-top: 15px;margin-left: 20px" id="dv' + v + '"></div>')
            $("#dv" + v).append("<span style='font-family: LiSu'>已选择授课时间段：</span><input type='button' value='×' class='herd_But' onclick='shan(" + data[v].id + ")'><br>");
            $("#dv" + v).append("<select id='organ" + v + "' name='organId' multiple='multiple' ></select>");

            var hou = data[v].classHours;
            var strs = new Array(); //定义一数组
            strs = hou.split(",")//把课时分割到数组里
            jks = jks + strs.length;
            for (var i = 0; i < timeres.length; i++) {
                //把数据库的值放到下拉框中
                var option = document.createElement("option");
                document.getElementById("organ" + v).appendChild(option)
                option.value = timeres[i].id;
                option.text = timeres[i].classTime;
                for (var x = 0; x < strs.length; x++) {
                    if (strs[x] - 1 == i) {//判断如果数组下标的值和i一样就设置op为默认选中
                        option.selected = true;
                    }
                }
            }
            $("#organ" + v).fSelect();

            $("#dv" + v).append("<br>已选择的授课名称：<br>");
            $("#dv" + v).append("<input type='text'  id='yname" + v + "' value='" + data[v].courseName + "' >");
            $("#dv" + v).append('<div style="margin-left: 400px;margin-top: -44px; width: 180px;height:50px" id="dvc' + v + '" ></div>');
            if (data[v].mark == 1) {
                $("#dv" + v).append("<p style='display: none' id='p" + v + "'>是否已上课：<input type='radio' value='1' checked  name='da" + v + "'>是 <input type='radio'  value='0'   name='da" + v + "'>否</p>");
            } else {
                $("#dv" + v).append("<p style='display: none' id='p" + v + "'>是否已上课：<input type='radio'  value='1' name='da" + v + "' >是 <input type='radio' value='0' checked  name='da" + v + "'>否</p>");
            }

            $("#dvc" + v).append("已选择的授课班级：<br>");
            $("#dvc" + v).append("<select id='selecs" + v + "'></select>");
            for (var j = 0; j < cl.length; j++) {
                //把数据库的值放到下拉框中
                var options = document.createElement("option");
                document.getElementById("selecs" + v).appendChild(options)
                options.value = cl[j].classId;
                options.text = cl[j].className;
            }
            $("#selec" + v).val(data[v].classID);
            $("#dvc" + v).append("<input type='text' value='" + data[v].id + "' id='id" + v + "' style='display: none'>");
            $("#dvc" + v).append("<input type='button' value='修改' class='Up_but' style='margin-left: 65px;margin-top: 7px;border: none;height: 28px;width: 56px;display: none' id='gg" + v + "' onclick='upde(" + v + ")'>");
            $("#dv" + v).append('<div style="border: 1px solid #DCDCDC; width: 530px;height: 170px;margin-top: -127px;" id="zhe' + v + '" class="msgbox" ondblclick="gai(' + v + ')"></div>')
        }

        document.getElementById("jks").innerHTML = jks;
        document.getElementById("dan").innerHTML = dates;
    }
    let quan;
    let ych;
    let ykm;
    let yban;
    //双击去掉笼罩层可修改
    var gai = function (i) {

        $("#zhe" + i).css("display", "none");
        $("#gg" + i).css("display", "block");
        $("#gg" + i).css("display", "block");
        $("#p" + i).css("display", "block");
        quan = $("#organ" + i).val();
        ykm = $("#yname" + i).val();
        yban = $("#selecs" + i).val();
        var element = document.getElementsByName("da" + i);
        // 通过获取到name属性=hero的所dom对象
        for (var i = 0; i < element.length; i++) {
            // 判断该单选框是否处于选中状态
            if (element[i].checked) {
                ych = element[i].value;
            }
        }
    }
    //修改
    var upde = function (i) {
        var id = $("#id" + i).val();
        var kshi = $("#organ" + i).val();
        var kname = $("#yname" + i).val();
        var kban = $("#selecs" + i).val();
        var cc;
        var element = document.getElementsByName("da" + i);
        // 通过获取到name属性=hero的所dom对象
        for (var i = 0; i < element.length; i++) {
            // 判断该单选框是否处于选中状态
            if (element[i].checked) {
                cc = element[i].value;
            }
        }
        var datas = myAjax({
            "id": id,
            "kshi": kshi.toString(),
            "kname": kname,
            "kban": kban,
            "sj": dates,
            "tid": document.getElementById("name").innerText.trim(),
            "q": quan.toString(),
            "c": cc,
            "yc": ych,
            "km": ykm,
            "yban": yban
        }, "UpdateServlet", resu);

    }
    var resu = function (data) {
        if (data == 1) {
            alert("修改成功")
            $("#div2").empty();
            var datas = myAjax({"name": strs, "sj": dates}, "ShowUserServlet", hui);
        } else if (data == 0) {
            alert("修改失败")
            $("#div2").empty();
            var datas = myAjax({"name": strs, "sj": dates}, "ShowUserServlet", hui);
        }
        if (data == -2) {
            alert("数据重复")
        }
    }

    //删除已有排课
    var shan = function (i) {
        if (confirm("是否确定删除")) {
            var shi = 1;
            var datas = myAjax({"shi": shi, "id": i}, "DeleteServlet", ss);
        }
    }
    var ss = function (data) {
        if (data == 1) {
            debugger
            alert("删除成功")
            $("#div2").empty();
            var datas = myAjax({"name": strs, "sj": dates}, "ShowUserServlet", hui);
        } else {
            alert("删除失败")
        }
    }


    function gb() {
        $("#div").css("display", "none");
        $("#div2").empty();
        $("#zen").attr("disabled", false);
        document.getElementById("jks").innerHTML = "";
        cou = 0;
        $("#dh").css("display", "none");
        MyAjax("./SelectMonth", {name: document.getElementById("name").innerText.trim(), m: m1, y: y1}, tc)
    }

    //增加课程点击事件
    var cou = 0;
    var name;
    var inse = function () {
        $("#dh").css("display", "block");
        $("#div2").append('<div style="border: 1px dashed #283E5A; width: 530px;height: 140px;margin-top: 15px;margin-left: 20px" id="div' + cou + '" ></div>')
        $("#div" + cou).append("请选择授课时间段：<br>");
        $("#div" + cou).append("<select id='organId" + cou + "' name='organId' multiple='multiple'></select>");
        for (var i = 0; i < timeres.length; i++) {
            //把数据库的值放到下拉框中
            var option = document.createElement("option");
            document.getElementById("organId" + cou).appendChild(option)
            option.value = timeres[i].id;
            option.text = timeres[i].classTime;
        }
        $("#organId" + cou).fSelect();
        $("#div" + cou).append("<hr style='color:#EEF1F6;'/>")
        $("#div" + cou).append("请输入授课名称：<br>");
        $("#div" + cou).append("<input type='text'  id='sname" + cou + "'>");
        $("#div" + cou).append('<div style="margin-left: 400px;margin-top: -44px; width: 180px;height:50px" id="divc' + cou + '" ></div>');
        $("#divc" + cou).append("请选择授课班级：<br>");
        $("#divc" + cou).append("<select id='sele" + cou + "' ><option value='-1'>请选择</option></select>");
        for (var v = 0; v < cl.length; v++) {
            //把数据库的值放到下拉框中
            var option = document.createElement("option");
            document.getElementById("sele" + cou).appendChild(option)
            option.value = cl[v].classId;
            option.text = cl[v].className;
        }
        cou++;
        $("#dh").css("display", "none");
    }
    //增加保存按钮
    var save = function () {
        $("#dh").css("display", "block");
        var seles = new Array()
        for (var i = 0; i < cou; i++) {
            if ($("#sele" + i).val() == -1) {
                alert("请选择班级")
                return false
            }

            if (i != cou - 1) {
                if ($("#organId" + i).val().toString() != $("#organId" + (i + 1)).val().toString()) {
                    var a = new Object();
                    a = {
                        keshi: $("#organId" + i).val(),
                        ban: $("#sele" + i).val(),
                        kname: $("#sname" + i).val(),
                        name: document.getElementById("name").innerText.trim(),
                        sj: dates
                    }
                    seles[i] = a;
                } else {
                    alert("同时间段不可选")
                    return false;
                }
            }

            if (cou - 1 == 0) {
                var a = new Object();
                a = {
                    keshi: $("#organId" + i).val(),
                    ban: $("#sele" + i).val(),
                    kname: $("#sname" + i).val(),
                    name: document.getElementById("name").innerText.trim(),
                    sj: dates
                }
                seles[i] = a;
            }

        }
        debugger
        if (seles.length != 0) {
            var datas = null;
            $.ajax({
                type: "post",
                data: {"seles": JSON.stringify(seles)},
                url: "./InserServlet",
                dataType: "text",
                success: function (data, xhr) {

                },//只有当请求完毕哪怕请求失败也会调用的函数
                complete: function (data) {
                    //得到其json数据
                    if (data.status == 200 && data.readyState == 4) {
                        fill(data);
                    }

                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    //   alert("请求数据失败！");
                }

            })

            return datas;
        }
        $("#dh").css("display", "none");
    }


    var fill = function (data) {
        alert(data.responseText);
        $("#div2").empty();
        var datas = myAjax({"name": strs, "sj": dates}, "ShowUserServlet", hui);
    }


    // 点击获取当前年月  并动态加载 页面显示
    let prevBtn3 = document.querySelector('.el-calendar__button-group ');
    prevBtn3.addEventListener('click', () => {
        debugger

        var el = document.getElementsByClassName(("el-calendar__title"));
        var x = el.item(0).innerHTML.trim();


        y1 = x.split("年")[0].trim();
        // m1 = x.split("年")[1].trim().substr(0, 1).trim();
        m1 = x.split("年")[1].trim().split("月")[0].trim();
        if (m1 < 10) {
            m1 = "0" + m1;
            m1 = m1.trim();
        }

        MyAjax("./SelectMonth", {name: document.getElementById("name").innerText.trim(), m: m1, y: y1}, tc)
    })

    //打钩


    function tc(data) {

        debugger


        var s = document.getElementsByClassName("prev");

        for (var i = 0; i < s.length; i++) {
            $(s[i]).attr('style', 'color:#C0C4CC');
        }


        var z = document.getElementsByClassName("current");

        for (var i = 0; i <  z.length; i++) {
            $(z[i]).attr('style', 'color:black');
        }


        var x = document.getElementsByClassName("next");
        for (var i = 0; i < x.length; i++) {
            $(x[i]).attr('style', 'color:#C0C4CC');
        }




        var m;
        var d = [];
        var dd = [];
        for (var i = 0; i < data.length; i++) {

            if (data[i].dmy != null) {
                //获取 月份
                m = data[i].dmy.split("-")[1]
                //获取 日
                d.push(data[i].dmy.split("-")[2])
                if (d[i] < 10) {
                    dd.push(d[i].split("0")[1])
                }
                if (d[i] >= 10) {
                    dd.push(d[i])
                }

            }
        }
        for (var i = 0; i < z.length; i++) {
            debugger


            //如果当前页面显示的月份和数据库月份对应
            if (m1 == m) {
                for (var s = 0; s < d.length; s++) {

                    $(z[dd[s] - 1]).css("color", "red")
                }
            }
            // if (m1 != m) {
            //
            //     $(s[i]).attr('style', 'color:#C0C4CC')
            //     $(z[i]).attr('style', 'color:black')
            //     $(x[i]).attr('style', 'color:#C0C4CC')
            // }

        }


    }

    //动画


</script>

</body>


</html>
